<template>
	<section>
		<headers txt="验证码修改密码"></headers>
		<ul class="mu20 ">
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">

				<label for="tel" class="flex_self w25">手机号</label>
				<input id="tel" v-model="tel" class="flex1 sz30" type="tel" placeholder="输入手机号码" />

			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="ver" class="flex_self w25">验证码</label>
				<input id="ver" v-model="ver" class="sz30 w40" type="number" placeholder="输入验证码" />
				<button class="walld44 huefff plr20 rou10 mud10 w35 sz30" type="button" @click="vers" :disabled="isDs" :class="{wall999: isDs}">{{ms}}</button>
			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="pwd1" class="flex_self w25">新密码</label>
				<input id="pwd1" v-model="pwd1" class="flex1 sz30" type="password" placeholder="输入6-12位新密码" />
			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="pwd2" class="flex_self w25">确认密码</label>
				<input id="pwd2" v-model="pwd2" class="flex1 sz30" type="password" placeholder="再次输入新密码" />
			</li>
		</ul>
		<button class="btns mu30" type="button" @click="newpwd">重置密码</button>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				tel: "",
				ver: "",
				pwd1: "",
				pwd2: "",
				isDs: false,
				ms: "获取验证码"
			}
		},
		methods: {
			vers: function() {
				let v = this;
				if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				} else {
					this.$http.get('/WorkMembers/V1.0/SendVer', {
						params: {
							"MembersID": v.tel,
							"Type": "phone",
							"UseType": "editpwd"
						}
					}).then((res) => {
						
						if(res.data.Return_ID == 0) {
							Toast(res.data.Return_Mess);
							v.isDs = true;
							let n = 10, // 倒计时10秒
								sto = setInterval(function() {
									v.ms = n + "s";
									n--;
									n === 0 && (clearInterval(sto), v.isDs = false, v.ms = "获取验证码")
								}, 1000);
						}else{
							Toast(res.data.Return_Mess);
						}

					}).catch((err) => {
						Toast(err);
					});

				}
			},
			newpwd: function () {
				let v = this;
				if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				}else if(!/^\d{6}$/.test(v.ver)){
					Toast("请输入6位数验证码")
				}else if(!/^\w{6,12}$/.test(v.pwd1)) {
					Toast("请输入数字、字母及下划线组成的6-12位密码")
				} else if(v.pwd1 !== v.pwd2) {
					Toast("两次输入密码不相同")
				}else{
					Indicator.open({
						text: '请求中，请稍等'
					});
					
					this.$http.post("/WorkMembers/V1.0/EditPwdByVer", Qs.stringify({
						"MembersID": sessionStorage.MembersID,
						"PwdType": v.$route.query.types,
						"Ver": v.ver,
						"Pwd": md5(v.pwd2)

					})).then((res) => {
						Indicator.close();
						if(!res.data.Return_ID){
							v.$router.go(-2);
						}
						Toast(res.data.Return_Mess);

					}).catch((err) => {
						Indicator.close();
						Toast(err);
					});
				}
			}
		},
		
	}
</script>

<style scoped>
	
</style>